import G2BaseChart from './G2BaseChart'

const LineChart = ({
  data,
  xField = 'day',
  yField = 'value',
  yField2 = 'name',
  color = ['#98D2FC', '#147AD6'],
  width = 400,
  smooth = true,
  showArea = false,
}) => {
  const renderChart = (chart) => {
    chart
      .data(data)
      .encode('x', xField)
      .encode('y', yField)
      .encode('color', yField2)
      .scale('x', {
        nice: true,
        fill: '#fff',
      })
      .scale('y', {
        nice: true,
      })
      .scale('color', {
        type: 'ordinal',
        range: color,
      })
      .axis('y', { title: '', tickStroke: '#fff', labelFill: '#fff' })
      .axis('x', {
        title: '',
        tickStroke: '#fff',
        labelFill: '#fff',
      })
      .legend('color', {
        position: 'top',
        layout: { justifyContent: 'center' },
        itemLabelFill: '#fff',
      })

    chart.line().encode('shape', 'smooth')

    chart.point().encode('shape', 'point').tooltip(false)
    chart.render()
  }

  return <G2BaseChart data={data} width={width} render={renderChart} />
}

export default LineChart
